<template>
  <view class="container">
    <view class="search-wrapper">
      <view class="search-input">
        <view class="search-input-wrapper">
          <view class="left">
            <text class="search-icon iconfont icon-sousuo"></text>
          </view>
          <view class="right">
            <input v-model="searchValue" class="input" placeholder="查找店铺" type="text"></input>
          </view>
        </view>
      </view>
      <view class="search-button">
        <button class="button" @click="doSearch" type="warn"> 搜索 </button>
      </view>
    </view>
    <view class="store-list">
      <view class="store-info" v-for="(item, index) in storeList" :key="index" @click="handleQuick(item.id)">
		  <view class="name">{{ item.name }}</view>
		  <view class="hours">营业时间：{{ item.hours }}</view>
		  <view class="address"><text class="location-icon iconfont icon-dingwei"></text>{{ item.address }}</view>
		  <view class="tel">联系电话：{{ item.phone }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  import * as settingApi from '@/api/setting'
  import * as userApi from '@/api/user'
  export default {
    data() {
      return {
        storeId: 0,
        searchValue: '',
		storeList: []
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.storeId = this.getStoreId()
		this.getStoreList()
    },

    methods: {
		
	  /**
	   * 获取店铺列表
	   * */
	   getStoreList() {
		   const app = this
		   settingApi.storeList(app.searchValue)
		     .then(result => {
		       app.storeList = result.data.data
		   })
	   },
	   
      /**
       * 获取历史店铺
       */
      getStoreId() {
		return uni.getStorageSync("storeId")
      },

      /**
       * 搜索提交
       */
      doSearch() {
        this.getStoreList()
      },

      /**
       * 跳转回去
       */
      handleQuick(storeId) {
		const app = this
		userApi.defaultStore(storeId)
		  .then(result => {
		    uni.setStorageSync("storeId", storeId)
		    uni.navigateBack()
		})
      }

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 20rpx;
    min-height: 100vh;
    background: #f7f7f7;
  }

  .search-wrapper {
    display: flex;
    height: 64rpx;
  }

  // 搜索输入框
  .search-input {
    width: 80%;
    background: #fff;
    border-radius: 10rpx 0 0 10rpx;
    box-sizing: border-box;
    overflow: hidden;

    .search-input-wrapper {
      display: flex;

      .left {
        display: flex;
        width: 60rpx;
        justify-content: center;
        align-items: center;

        .search-icon {
          display: block;
          color: #b4b4b4;
          font-size: 28rpx;
        }

      }

      .right {
        flex: 1;

        input {
          font-size: 28rpx;
          height: 64rpx;
          line-height: 64rpx;

          .input-placeholder {
            color: #aba9a9;
          }
        }

      }
    }
  }

  // 搜索按钮
  .search-button {
    width: 20%;
    box-sizing: border-box;

    .button {
      line-height: 64rpx;
      height: 64rpx;
      font-size: 28rpx;
      border-radius: 0 20px 20px 0;
      background: #00acac;
    }
  }


  // 店铺列表
  .store-list {

    .store-info {
      padding: 10px 0;
      overflow: hidden;
      border: 2rpx solid #cccccc;
      height: 240rpx;
	  border-radius: 30rpx;
	  margin-top: 10rpx;
	  margin-bottom: 10rpx;
	  padding: 30rpx;
	  background: #FFFFFF;
	  .name {
		  font-size: 34rpx;
		  font-weight: bold;
		  margin-top: 15rpx;
		  margin-bottom: 12rpx;
	  }
	  .location-icon {
		  color: #00acac;
		  font-weight: bold;
	  }
    }
  }
</style>
